<template>
	<!-- 自定义标题栏 -->
	<view class="custom-title-bar" :style="{ zIndex, backgroundColor: bgColor }">
		<view class="safe" :style="{ height: `${safeAreaInsetTop}rpx` }"></view>
		<!-- 标题栏内容 -->
		<view class="title-bar-content flex-center" :style="{ color: textColor }">
			<!-- 返回键 -->
			<view class="back-arrow flex-center" @click="handleBack" v-show="back">
				<image class="back-arrow-icon" src="/static/svg-icon/back-arrow.svg" mode="aspectFill"></image>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import {
		computed,
		defineComponent
	} from 'vue';

	export default defineComponent({
		name: 'CustomTitleBar',
		props: {
			// 背景颜色
			bgColor: {
				type: String,
				default: '#fff',
			},
			// 文本颜色
			textColor: {
				type: String,
				default: '#333',
			},
			// 返回箭头
			back: {
				type: Boolean,
				default: false,
			},
			// 标题栏层级
			zIndex: {
				type: Number,
				default: 30,
			},
		},
		setup() {
			// 顶部安全距离
			const safeAreaInsetTop = computed(() => {
				return uni.getSystemInfoSync().statusBarHeight * 2;
			});

			// 返回上一级
			const handleBack = () => {
				const pages = getCurrentPages();
				console.log('pages: ', pages);
				if (pages.length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '/pages/index/index',
					});
				}
			};

			return {
				safeAreaInsetTop,
				handleBack,
			};
		},
	});
</script>

<style lang="scss" scoped>
	.custom-title-bar {
		width: 100%;
		font-weight: 600;
		position: relative;
		letter-spacing: 4rpx;

		// 标题栏内容
		.title-bar-content {
			width: 100%;
			height: 88rpx;
			font-size: 28rpx;
		}

		// 返回键
		.back-arrow {
			left: 0;
			width: 88rpx;
			height: 88rpx;
			font-weight: bold;
			position: absolute;

			.back-arrow-icon {
				width: 16rpx;
				height: 26rpx;
			}
		}
	}
</style>